<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
onMounted(() => {
  // 预加载
  preload()
})
const router = useRouter()
const count = ref(0)
const percent = ref('')

const preload = () => {
  let chooseEat = import.meta.glob('../assets/img/*', { eager: true })
  let listlength = Object.keys(chooseEat).length
  for (const item in chooseEat) {
    let image = new Image()
    image.src = chooseEat[item].default
    // console.log(image.src)
    // 图片加载
    image.onload = () => {
      count.value++
      let percentNum = Math.floor((count.value / listlength) * 100)
      percent.value = `${percentNum}%`
    }
    image.onerror = () => {
      console.log('图片加载失败')
    }
  }
}

watch(percent, (newVal) => {
  // console.log(newVal)
  if (newVal === '100%') {
    router.push('/index')
  }
})
</script>
<template>
  <div class="loading box clmcenter bg">
    <!-- <p>loading...{{ percent }}</p> -->
    <img src="../assets/img/logo.png" class="logo">
  </div>
</template>
<style lang="scss" scoped>
.loading {
  .logo{
    width: 10%;
  }
}
</style>
